<template>
	<view class="withdrawal-detail" v-if="withdrawalDetail">
		<g-navbar title="提现详情" />
		<view class="main">
			<view class="withdrawal-status-wrapper">
				<view class="status-icon-wrapper">
					<image :src="statusIcon" style="width: 100%;height: 100%;"></image>
				</view>
				<view class="status-text">
					{{withdrawalDetail.status_name}}
				</view>
			</view>
			<view class="withdrawal-detail-wrapper">
				<view class="detail-item" v-for="item,index in withdrawalDetailKeys" :key="index">
					<template v-if="item.value === 'submit_img'">
						<view class="detail-item">
							<view class="label">
								{{item.key}}
							</view>
							<view class="photo-list">
								<image :src="withdrawalDetail[item.value]" class="photo" mode="aspectFill"/>
							</view>
						</view>
					</template>
					<template v-else>
						<view class="label">
							{{item.key}}
						</view>
						<view class="value" :class="item.className">
							{{withdrawalDetail[item.value]}}
						</view>
					</template>

				</view>
			</view>
			<!-- 	<view class="btn-wrapper">
				<g-button btn_text="确定" :width="686" :height="104" :borderRadius="52"></g-button>
			</view> -->
		</view>
	</view>
</template>

<script lang="ts" setup>
	import { Ref, ref,computed } from 'vue';
	import { onLoad } from '@dcloudio/uni-app';
	import { WITHDRAWAL_TYPE, RECEIPT_CHANNEL, WITHDRAWAL_WAY, WITHDRAWAL_STATUS,WITHDRAWAL_STATUS_ICON } from '@/enum/withdrawal';
	import REST_URL from '@/http/http.restUrl';
	import { useStore } from 'vuex';
	import { GET_STORE_USERINFO } from '@/store/gettersType';

	interface IWithdrawalDetail {
		withdraw_type : WITHDRAWAL_TYPE,
		amount : string,
		customer_id : number, //提现用户id
		status : WITHDRAWAL_STATUS, //1:待处理2:审核成功3:审核失败,资金回退
		task_code : string, //提现工单号
		created_at : string, //申请时间
		updated_at : string, //更新时间
		check_time : string, //审核时间
		out_detail_no : null, //三方流水号
		submit_img : string, //审核截图
		fail_reason : null | string, //失败原因
		cover_charge : string, //审核成功收取服务费
		service_fee_rate : string, //服务费率（百分比）
		receipt_channel : RECEIPT_CHANNEL, //0:未打款1:实时到账2:人工返款
		page_from : WITHDRAWAL_WAY, //1:红包提现2:基本余额提现3:扶持基金提现
		nickname : string, //用户昵称
		phone : string, //手机号
		id : number, //条目id
		status_name : string, //审核状态
		page_from_dec : string, //提现来源
		withdraw_type_desc : string, //到账渠道
		receipt_channel_desc : string, //到账状态
		customer_info : string //用户信息
	}

	const store = useStore();

	const withdrawalId : Ref<number> = ref(0);




	onLoad(async (e) => {
		await uni.loginManger.$interceptor;
		withdrawalId.value = e!.id;
		getWithdrawalDetail();
	})

	const withdrawalDetail : Ref<IWithdrawalDetail | null> = ref(null);
	
	
	const statusIcon = computed(()=>{
		if(!withdrawalDetail.value){
			return ''
		}
		switch (withdrawalDetail.value.status){
			case WITHDRAWAL_STATUS.PENDING:
			return WITHDRAWAL_STATUS_ICON.PENDING;
			case WITHDRAWAL_STATUS.CHECK_SUCCESS:
			return WITHDRAWAL_STATUS_ICON.CHECK_SUCCESS;
			case WITHDRAWAL_STATUS.CHECK_FAIL:
			return WITHDRAWAL_STATUS_ICON.CHECK_FAIL;
		}
	})

	interface IDetailItem {
		key : string,
		value : keyof IWithdrawalDetail,
		className?:string,
	}

	const withdrawalDetailKeys : IDetailItem[] = [
		{
			key: '提现金额',
			value: 'amount',
			className:'amount'
		},
		{
			key: '收取服务费',
			value: 'cover_charge',
			className:'amount'
		},
		{
			key: '服务费率',
			value: 'service_fee_rate',
		},
		{
			key: '提现工单号',
			value: 'task_code',
		},
		{
			key: '用户昵称',
			value: 'nickname',
		},
		{
			key: '手机号',
			value: 'phone',
		},
		{
			key: '到账渠道',
			value: 'withdraw_type_desc',
		},
		{
			key: '到账状态',
			value: 'receipt_channel_desc',
		},
		{
			key: '申请时间',
			value: 'created_at',
		},
		{
			key: '审核时间',
			value: 'check_time',
		},
		{
			key: '审核截图',
			value: 'submit_img',
		}
	];

	const getWithdrawalDetail = async () : Promise<void> => {
		const result : IWithdrawalDetail = (await uni.http.POST(REST_URL.getWithdrawalDetail, {
			wid: withdrawalId.value,
			customer_id: store.getters[GET_STORE_USERINFO].id,
		})).data;
		console.log(result)
		withdrawalDetail.value = result;
	}
</script>

<style scoped lang="scss">
	@import "./withdrawalDetail.scss";
</style>